import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:kasax_demos2/widgets/custom_shimmerwidget.dart';
import 'package:shimmer/shimmer.dart';

import 'entry_movie.dart';

/// https://blog.csdn.net/weixin_45365889/article/details/102611468
/// https://pub.flutter-io.cn/packages/shimmer
/// 有效资料:https://jishuin.proginn.com/p/763bfbd5ff14
class ShimmerDemo2 extends StatefulWidget {
  const ShimmerDemo2({Key? key}) : super(key: key);

  @override
  _ShimmerDemo2State createState() => _ShimmerDemo2State();
}

class _ShimmerDemo2State extends State<ShimmerDemo2> {
  List<MovieModel> allMovies = [
    MovieModel(
        urlImg:
            'https://gumlet.assettype.com/bloombergquint%2F2019-04%2F4c894d41-181f-4c8c-8630-4604a6d51d05%2Favengers_infinity_war_and_endgame_poster_w7_1600x900.jpg?rect=0%2C0%2C1250%2C900&auto=format%2Ccompress&w=480&dpr=2.6',
        title: 'Avengers: Endgame',
        detail: 'It s a 2019 American superhero film based '),
    MovieModel(
        urlImg:
            'https://townsquare.media/site/442/files/2014/08/The-Expendables.jpg?w=980&q=75',
        title: 'The Expendables 3',
        detail: 'The Expendables 3 is a 2014 American action '),
    MovieModel(
        urlImg:
            'https://img.etimg.com/thumb/msid-71454408,width-650,imgsize-242226,,resizemode-4,quality-100/war-1.jpg',
        title: 'War',
        detail: 'War is a 2019 Indian Hindi-language action '),
    MovieModel(
        urlImg:
            'https://iadsb.tmgrup.com.tr/de9f7e/1200/627/0/0/1000/522?u=https://idsb.tmgrup.com.tr/2019/12/22/1577016105167.jpg',
        title: 'Jumanji: The Next Level',
        detail: 'Jumanji: The Next Level is a 2019 American '),
    MovieModel(
        urlImg: 'https://evertise.net/wp-content/uploads/2021/06/image-366.png',
        title: 'Fast & Furious 9',
        detail: 'Dom Toretto`s peaceful life off the grid.')
  ];

  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    lateLoadData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Shimmer闪烁动画2"),
      ),
      body: Container(
        child: ListView.separated(
            itemBuilder: (context, index) {
              var inf = allMovies[index];
              return isLoading ? buildLoadingPlaceHolder() : buildListItem(inf);
            },
            separatorBuilder: (context, index) {
              return Divider();
            },
            itemCount: allMovies.length),
      ),
    );
  }

  Container buildListItem(MovieModel inf) {
    return Container(
      margin: EdgeInsets.only(left: 16, right: 16, top: 10),
      child: Row(
        children: [
          Container(
              margin: EdgeInsets.only(right: 10),
              child: CircleAvatar(
                radius: 32,
                backgroundImage: NetworkImage(
                  inf.urlImg,
                ),
              )),
          Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(
                inf.title,
                style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 16),
              ),
              SizedBox(height: 5),
              Text(
                inf.detail,
                style: TextStyle(color: Colors.grey, fontSize: 14),
              ),
              SizedBox(height: 5),
            ],
          ))
        ],
      ),
    );
  }

  void lateLoadData() async {
    await Future.delayed(Duration(seconds: 5));
    setState(() {
      print("重置变量，刷新界面");
      isLoading = false;
      print("刷新界面");
    });
  }

  buildLoadingPlaceHolder() {
    return Container(
      margin: EdgeInsets.only(left: 16, right: 16, top: 10),
      child: Shimmer.fromColors(
        baseColor: Color(0xFFD6D6D6),
        highlightColor: Colors.white,
        period: Duration(seconds: 2),
        child: Row(
          children: [
            Container(
              child: CustomShimmerWidget.circular(
                height: 64,
                width: 64,
              ),
              margin: EdgeInsets.only(right: 10),
            ),
            Expanded(
                child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                CustomShimmerWidget.rectangular(
                  height: 16,
                  width: MediaQuery.of(context).size.width * 0.3,
                ),
                SizedBox(height: 5),
                Container(
                    child: CustomShimmerWidget.rectangular(
                  height: 14,
                  width: MediaQuery.of(context).size.width * 0.6,
                )),
              ],
            ))
          ],
        ),
      ),
    );
  }
}
